import Taro, { Component, useState, useEffect, useRouter } from '@tarojs/taro';
import { View, Input, Image } from '@tarojs/components';
import Bg1 from './img/bg.png';
import Title from './img/title.png';
import CouponTitle from './img/coupon-title.png';
import classnames from 'classnames';
import Tips from '../../../components/tips-modal';
import NavigationBar from '../../../components/navigationBar/index';
import { fullImgUrl, timeFormat } from '../../../utils/utils';

import './index.scss';
import { cardConvert, couponConvert } from '../../../services/card';

function Exchange(props) {
  const navigationBarHeight = Taro.getStorageSync('navigationBarHeight');
  const [password, setPassword] = useState('');
  const [isTip, setIstip] = useState(Taro.getStorageSync('setting').is_tip);
  const [type, setType] = useState(''); // 判断兑换类型
  const router = useRouter();
  const [bg, setBg] = useState('')
  const Bgclass = 'bg'

  const attr_name = Taro.getStorageSync('attr_name')
  useEffect(() => {
    setType(router.params.type);
    if (Taro.getStorageSync('barcode_address')) {
      setBg(fullImgUrl(Taro.getStorageSync('barcode_address')))
    } else {
      setBg(Bg1)
    }
    // console.log(router.params.type, 'type');
    Taro.removeStorageSync('barcode_address')

  }, []);

  function handleText(e) {
    setPassword(e.target.value.trim());
  }

  function convert() {
    if (!password) {
      Taro.showToast({
        title: '请输入兑换码',
        icon: 'none',
      });
    } else {
      if (type !== 'coupon') {
        cardConvert({
          no: password,
          card_no: Taro.getStorageSync('card_no'),
        }).then(res => {
          Taro.navigateTo({
            url: `/pages/goods-detail/index?code=${password}`,
          });
        });
      } else {
        couponConvert({
          exchange_no: password,
          coupon_no: Taro.getStorageSync('card_no'),
        }).then(res => {
          Taro.navigateTo({
            url: `/subPackageWork/pages/roll-shop-list/index?code=${password}`,
          });
        });
        // Taro.navigateTo({
        //   url: `/subPackageWork/pages/roll-shop-list/index?code=${password}`,
        // });
      }
    }
  }

  return (
    <View className='exchange' style={`margin-top: ${navigationBarHeight}`}>
      <NavigationBar text='兑换' />

      <Image className={Bgclass} src={bg} />
      <View className='content'>

        {router.params.type ? (
          <Image className='title' src={CouponTitle} />
        ) : (
            <Image className='title' src={Title} />
          )}
        {attr_name ? (
          <View className='title1'>
            您将兑换的是【{attr_name}】
          </View>) : (
            ''
          )}
        <View className='code-box'>
          {router.params.type ? (
            <Input placeholder='请输入优惠券兑换码' className='code' onInput={handleText} />
          ) : (
              <Input placeholder='请输入兑换卡密码' className='code' onInput={handleText} />
            )}
        </View>
        <View
          className={classnames({
            'submit-btn': true,
            'active-btn': password,
          })}
          onClick={convert}
        >
          提交
        </View>
        {type !== 'coupon' && (
          <View className='tip'>
            <View className='tip-title'>兑换规则说明：</View>
            <View className='tip-content'>1.输入兑换卡上的兑换码，即可成功进入下单页面；</View>
            <View className='tip-content'>2.使用兑换码购买只能购买兑换卡指定商品；</View>
            <View className='tip-content'>3.只有一次使用机会</View>
          </View>
        )}
      </View>
      {isTip ? <Tips onClose={() => setIstip(false)} /> : null}
    </View>
  );
}

Exchange.config = {
  navigationBarTitleText: '兑换',
};

export default Exchange;
